<template>
  <a-layout class="login-box">

    <div class="login-box-left-top-content">
      <img v-if="getServerBg.upPic.sysLogo.pic !== ''" :src="getServerBg.upPic.sysLogo.pic || defaultPic.sysLogo"
           alt="图标">
      <img v-if="getServerBg.upPic.sysTheFontAfterLogo.pic !== ''"
           :src="getServerBg.upPic.sysTheFontAfterLogo.pic || defaultPic.sysTheFontAfterLogo" alt="文本">
    </div>

    <a-layout-content>
      <login-content
          :finish="onFinish"
          :username.sync="username"
      />
    </a-layout-content>
    <enterprise-modal
        :enterpriseVisible.sync="enterpriseVisible"
        :role-list-options="roleListOptions"
        :guid-list="guidList"
        :ok="ok"
    />
    <Customer/>
  </a-layout>
</template>

<script>
import LoginContent from "@/views/login/Components/LoginContent";
import {mapState} from 'vuex';
import {getBrowserInfo} from "@/utils/getBrowserInfo";
import {getWindowDate, getFirstMenuRouter} from "@/utils";
import {login} from "@/api/login/login";
import {Message} from 'ant-design-vue';
import {mapLocalStorageKey, getLocalStorage, setLocalStorage} from "@/utils/localstore";
import {EnterpriseModal} from '@/components';
import Customer from "@/components/customerService/Customer";

export default {

  name: "Login",
  components: {
    LoginContent,
    EnterpriseModal,
    Customer
  },
  data() {
    return {
      defaultPic: {
        sysLogo: require("@/assets/images/login/keqiao/logo.png"),
        sysTheFontAfterLogo: require("@/assets/images/login/keqiao/textLogo.png"),
      },
      username: undefined,
      token: undefined,
      trueName: undefined,
      enterpriseVisible: undefined,
      financialVisible: undefined,
      roleListOptions: undefined,
      guidList: undefined
    }
  },
  created() {
    this.$store.dispatch('getServerBg/getFiles');
  },
  methods: {
    roleVisibleChange(data, token) {
      const {id, roleIdList, trueName, telephone, guid, dingTalkId} = data;
      this.token = token;
      this.trueName = trueName;
      const roleVisibleChangeLocalStorage = [
        {
          localStorageKey: "roleListOptions",
          jsonStringify: true,
          localStorageValue: roleIdList,
        },
        {
          localStorageKey: "userId",
          localStorageValue: id,
        },
        {
          localStorageKey: "telephone",
          localStorageValue: telephone,
        },
        {
          localStorageKey: "guidList",
          jsonStringify: true,
          localStorageValue: guid,
        },
        {
          localStorageKey: "dingTalkId",
          localStorageValue: dingTalkId,
        },
      ];
      if (guid.length > 0) {
        roleVisibleChangeLocalStorage.push(
            {
              localStorageKey: "guid",
              localStorageValue: guid[0].guid,
            }
        )
      }
      mapLocalStorageKey(roleVisibleChangeLocalStorage);
      if (roleIdList.length > 1 || roleIdList[0].children.length > 1) {
        this.roleListOptions = JSON.parse(getLocalStorage("roleListOptions"));
        this.guidList = JSON.parse(getLocalStorage("guidList"));
        this.enterpriseVisible = true;
      } else {
        const actionLocalStorage = [
          {
            localStorageKey: "roleId",
            localStorageValue: roleIdList[0].children[0].id,
          },
          {
            localStorageKey: "roleName",
            localStorageValue: roleIdList[0].children[0].name,
          },
          {
            localStorageKey: "appId",
            localStorageValue: roleIdList[0].children[0].appId,
          },
        ];
        mapLocalStorageKey(actionLocalStorage);
        this.$store.dispatch('login/actionToken', {
          token,
          trueName,
        });
        if (roleIdList[0].children[0].appId === 6) {
          getFirstMenuRouter({
            // url: window.location.hostname,
            // userId: getLocalStorage('userId'),
            // enabled: 1,
            roleId: roleIdList[0].children[0].id,
            state: 4
          })
        } else {
          this.$router.push({
            path: "/",
          });
        }
      }
    },
    onFinish(e, loginContentForm) {
      e.preventDefault();
      loginContentForm.validateFields(async (err, values) => {
        try {
          const {password} = values;
          const {username} = this;
          const loginProps = {
            browser: getBrowserInfo()[1],
            name: username,
            operateSystem: getBrowserInfo()[0],
            password: password,
            username: username,
            year: getWindowDate().year,
          };
          await login({...loginProps}).then(async res => {
            const {token, success, detail, data, message} = res;
            if (success) {
              await this.roleVisibleChange(data, token);
            } else {
              if (detail) {
                Message.error(detail);
              } else {
                message && Message.error(message);
                return true;
              }
            }
          })
        } catch (e) {
          await Promise.reject(err);
        }
      })
    },
    async ok({roleListSelectChildren}) {
      const {token, trueName} = this;
      await this.$store.dispatch('login/actionToken', {
        token, trueName
      });
      setLocalStorage("roleId", roleListSelectChildren.id);
      setLocalStorage("appId", roleListSelectChildren.appId);
      setLocalStorage("roleName", roleListSelectChildren.name);
      if (roleListSelectChildren.appId === 6) {
        getFirstMenuRouter({
          roleId: roleListSelectChildren.id,
          state: 4
        })
      } else {
        this.$router.push({
          path: "/",
        });
      }
      this.enterpriseVisible = false;
    },
  },
  computed: {
    ...mapState([
      'getServerBg'
    ])
  }
}
</script>

<style scoped lang="less">
.login-box {
  width: 100vw;
  height: 100vh;

  .login-box-left-top-content {
    position: absolute;
    left: 54px;
    top: 130px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    > img:first-child {
      height: 78px;
    }

    > img:last-child {
      height: 102px;
      margin-left: 15px;
    }
  }
}
</style>
